<template>
  <div style="color: #666;font-size: 14px;">
    <div style="padding-bottom: 20px">
      <b>您好！{{ user.nickname }}</b>
    </div>
    <el-card>
      <el-row >
        <el-col :span="12">
          <div id="pie1" style="width: 500px; height: 300px"></div>
        </el-col>
        <el-col :span="12">
          <div id="pie2" style="width: 500px; height: 300px"></div>
        </el-col>
      </el-row>
      <el-divider/>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Home",
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  },
  created() {
    this.shows1()
    this.shows2()
  },
  methods:{
    shows1(){
      this.showEcharts().then(() => {
        let userId=this.user.role=='ROLE_TEACHER'?this.user.id:'';
        console.log(userId);
        // 饼图
        const pieOption = {
          title: {
            text: '新生报到数量统计',
            subtext: '比例图',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: "报道人数",
              type: 'pie',
              radius: '55%',
              center: ['25%', '70%'],
              label:{            //饼图图形上的文本标签
                normal:{
                  show:true,
                  position:'inner', //标签的位置
                  textStyle : {
                    fontWeight : 300 ,
                    fontSize : 14,    //文字的字体大小
                    color: "#fff"
                  },
                  formatter:'{c}({d}%)'
                }
              },
              data: [],  // 填空
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            },
          ],

        };

        var pieDom = document.getElementById('pie1');
        var pieChart = echarts.init(pieDom);

        this.request.get("/user/members?userId="+userId).then(res => {

          pieOption.series[0].data = [
            {name: "已报到人数", value: res.data[0]},
            {name: "未报到人数", value: res.data[1]},
          ]
          pieChart.setOption(pieOption)
        })
      })
    },
    shows2(){
      this.showEcharts().then(() => {
        // 饼图
        let userId=this.user.role=='ROLE_TEACHER'?this.user.id:'';
        const pieOption = {
          title: {
            text: '新生住宿数量统计',
            subtext: '比例图',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: "报道人数",
              type: 'pie',
              radius: '55%',
              center: ['25%', '70%'],
              label:{            //饼图图形上的文本标签
                normal:{
                  show:true,
                  position:'inner', //标签的位置
                  textStyle : {
                    fontWeight : 300 ,
                    fontSize : 14,    //文字的字体大小
                    color: "#fff"
                  },
                  formatter:'{c}({d}%)'
                }
              },
              data: [],  // 填空
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            },
          ],

        };

        var pieDom = document.getElementById('pie2');
        var pieChart = echarts.init(pieDom);

        this.request.get("/user/isdorm?userId="+userId).then(res => {

          pieOption.series[0].data = [
            {name: "已住宿人数", value: res.data[0]},
            {name: "未住宿人数", value: res.data[1]},
          ]
          pieChart.setOption(pieOption)
        })
      })
    },
    showEcharts(){
      return new Promise(function(resolve, reject){
        resolve();
      });
    },
  }
}
</script>
